<template>
	<el-container style="height: 100%">
		<!-- 侧边栏 -->
		<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			<div class="bank-title">
				<p><span>银行后台管理系统</span></p>
			</div>
			<!-- 路由菜单 -->
			<el-menu router default-active="1" background-color="white" text-color="grey" active-text-color="#ffd04b">
				<template v-for="menu in menuList">
					<template v-if="menu.childrenMenu && menu.childrenMenu.length > 0">
						<el-submenu :index="menu.id + ''" :key="menu.id">
							<template slot="title">
								<i :class="menu.icon"></i>
								<span>{{ menu.name }}</span>
							</template>
							<!-- 在此处直接递归渲染子菜单 -->
							<template v-for="subMenu in menu.childrenMenu">
								<template v-if="subMenu.childrenMenu && subMenu.childrenMenu.length > 0">
									<el-submenu :index="subMenu.id + ''" :key="subMenu.id">
										<template slot="title">
											<span>{{ subMenu.name }}</span>
										</template>
										<template v-for="grandChild in subMenu.childrenMenu">
											<el-menu-item :index="grandChild.link + ''" :key="grandChild.id">
												<span>{{ grandChild.name }}</span>
											</el-menu-item>
										</template>
									</el-submenu>
								</template>
								<template v-else>
									<el-menu-item :index="subMenu.link + ''" :key="subMenu.id">
										<span>{{ subMenu.name }}</span>
									</el-menu-item>
								</template>
							</template>
						</el-submenu>
					</template>
					<template v-else>
						<el-menu-item :index="menu.link" :key="menu.id">
							<i :class="menu.icon"></i>
							<span>{{ menu.name }}</span>
						</el-menu-item>
					</template>
				</template>
			</el-menu>
		</el-aside>

		<el-container>
			<!-- 头部菜单 -->
			<el-header>
				<el-col :span="2" :offset="22">
					<el-button type="danger" @click="logout">注销</el-button>
				</el-col>
			</el-header>

			<el-main style="background-color: #f2f7fb">
				<!-- 路由视图 -->
				<router-view />
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			id: "",
			username: "",
			menuList: []
		};
	},
	methods: {
		// 查询菜单
		queryMenu() {
			this.axios.post("api/user-server/queryMenu").then(res => {
				if (res.data.code === 200) {
					console.log(res.data.data);
					this.menuList = res.data.data;
				} else if (res.data.code === 10001 || res.data.code === 10000) {
					this.$router.push({ path: "/login" });
					this.$message.error(res.data.data);
				} else {
					this.$message.error(res.data.data);
				}
			});
		},
		// 查询用户信息
		queryUser() {
			const token = sessionStorage.getItem("JWToken");
			if (token) {
				const parts = token.split(".");
				const payload = JSON.parse(atob(parts[1]));
				this.username = payload.username;
				this.id = payload.id;
				// const email = payload.email; // 未使用到的变量
			}
		},
		// 处理下拉菜单命令
		handleCommand(command) {
			if (command === "changePassword") {
				this.changePassword();
			}
			if (command === "logout") {
				this.logout();
			}
			if (command === "myInfo") {
				this.myInfo();
			}
		},
		// 跳转修改密码页面
		changePassword() {
			this.$router.push("/changePassword");
		},
		// 退出系统
		logout() {
			this.axios.post("api/logout").then(resp => {
				sessionStorage.removeItem("JWToken");
				if (resp.data.code === 200) {
					this.$router.push("/login");
					this.$message(resp.data.data);
				}
			});
		},
		// 跳转我的资料页面
		myInfo() {
			this.$router.push({ path: "/myInfo", query: { id: this.id } });
		}
	},
	created() {
		this.queryUser();
		this.queryMenu();
	}
};
</script>

<style scoped>
.bank-title p {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	color: #1890ff;
	font-size: 24px;
	font-weight: bold;
	font-family: "Arial", sans-serif;
}

.user-info {
	position: relative;
	top: -70px;
}

.logout-button {
	margin-left: 1100px;
	/* 可以根据需要调整右边距 */
}
</style>
